.oban-grid-fluid(@columnCount: 12, @gutterSize: 20px, @columnPrefix: column, @offsetPrefix: offset) {

  .oban-border-box();
  .oban-clearfix();
  margin-left: -@gutterSize;

  [class*=column] {
    float: left;
    .oban-border-box();
    padding: 0 0 0 @gutterSize;

  }

  .columnLoop (@index) when (@index > 0) {
    .@{columnPrefix}@{index} { 
      width: @index/@columnCount * 100%;
    }
    .@{offsetPrefix}@{index} {
      margin-left: @index/@columnCount * 100%;
    }
    .columnLoop(@index - 1);

  }
  .columnLoop (0) {}

  .columnLoop(@columnCount);

  &.grid-pad {
    padding: @gutterSize;
  }

}

.oban-grid-fixed(@columnSize: 100px, @gutterSize: 20px, @className: column-fixed) {

  @size: @columnSize + @gutterSize;
  padding-left: @size;

  .@{className} {
    margin-left: -@size;
    width: @size;
  }
}

.oban-grid-fixed-left(@columnSize, @gutterSize: 20px, @className: column-fixed) {
  .oban-grid-fixed(@columnSize, @gutterSize, @className);
}

.oban-grid-fixed-right(@columnSize: 100px, @gutterSize: 20px, @className: column-fixed) {

  @size: @columnSize + @gutterSize;
  padding-right: @size;

  .@{className} {
    margin-right: -@size;
    width: @size;
  }

}

.oban-grid-debug(@color: red) {

  [class*=column] {
    outline: 1px solid @color;
  }
}
